<template>
    <el-card>
        <el-form>
            <el-row :gutter="12">
                <el-col :span="6">
                    <el-form-item label="姓名">
                        <el-input placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号">
                        <el-input placeholder="请输入手机号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单号">
                        <el-input placeholder="请输入订单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :max-height="tableHeight - 32" :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="200" align="center" />
            <el-table-column prop="name" label="手机号" width="240" align="center" />
            <el-table-column prop="name" label="订单号" align="center" />
            <el-table-column prop="name" label="创建时间" width="200" align="center" />
            <el-table-column prop="name" label="支付状态" width="200" align="center" />
        </el-table>
        <Pagination :total="total" @pageChange="pageChange" />
    </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { getOrders } from "@/api"
import Pagination from '@/components/Pagination.vue'
import { useGlobalStore } from '@/stores'
const { tableHeight } = useGlobalStore()

const tableData = ref([{ name: "11" }])
const total = ref<number>(0)
const pageChange = (data: { page: number; size: number }) => {
    //   Object.assign(form.value, data)
    //   getTableData()
}


const getTableData = async () => {
    const { data } = await getOrders()
    console.log(data);
}

getTableData()
</script>